<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	<style>

		/** 应用列表样式 */
		.application-list-item {
			background-color: #fff;
			border: 1px solid #e8e8e8;
			border-radius: 4px;
			cursor: pointer;
			transition: all .2s;
		}

		.application-list-item:hover {
			box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
		}

		.application-list-item .application-list-item-header {
			padding: 16px 12px 0 12px;
		}

		.application-list-item .application-list-item-header .head {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			margin-right: 10px;
		}

		.application-list-item .application-list-item-header > h2 {
			color: #333;
			font-size: 18px;
			display: inline-block;
		}

		.application-list-item .application-list-item-body {
			padding: 12px 12px 12px 15px;
			font-size: 0;
		}

		.application-list-item .application-list-item-body .text-num-item {
			font-size: 26px;
			color: #666;
		}

		.application-list-item .application-list-item-body .text-num-item .text-num-item-title {
			font-size: 12px;
			color: #999;
			margin-bottom: 10px;
		}

		.application-list-item .application-list-item-body .text-num-item small {
			font-size: 16px;
		}

		.application-list-item .application-list-item-tool {
			font-size: 0;
			background-color: #FAFAFA;
			border-top: 1px solid #e8e8e8;
			padding: 10px 0 5px 0;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		.application-list-item .application-list-item-tool .application-list-item-tool-item {
			display: inline-block;
			width: 33%;
			font-size: 18px;
			text-align: center;
			color: #999;
			border-right: 1px solid #e8e8e8;
			box-sizing: border-box;
			cursor: pointer;
		}

		.application-list-item .application-list-item-tool .application-list-item-tool-item:last-child {
			border-right: none;
		}
		.project-list-item-cover {
		            width: 100%;
		            height: 110px;
		            display: block;
		            border-top-left-radius: 4px;
		            border-top-right-radius: 4px;
		        }
		/** // 应用列表样式结束 */
		#test1{
			clear: both;
			text-align: left!important;
		}
	    </style>
	<body>
		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-body">

					<div class="layui-row layui-col-space15" id="demoGrid3"></div>
					<div id="test1"></div>
				</div>
			</div>
		</div>



		<!-- 应用模板 -->
		<script type="text/html" id="demoGridItem3">
			<div class="layui-col-md3">
		        <div class="application-list-item">
		            <img class="project-list-item-cover" src="{{d.image}}"/>
		            <h2>{{d.title}}</h2>
		        </div>
		    </div>
		</script>

	</body>
	<script>
		layui.extend({
			dropdown: 'dropdown/dropdown',
			dataGrid: 'dataGrid/dataGrid'
		}).use(['layer', 'dataGrid','laypage','element', 'dropdown'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var dataGrid = layui.dataGrid;
			var element = layui.element;
			var laypage = layui.laypage;
			
			
			$.post("{:url('temp_h_all')}",{limit:12,offset:1,type:1}, function(res) {
				laypage.render({
				  elem: 'test1',
				  count: res.count, //数据总数，从服务端得到
				  limit: 12,
				  layout: [ 'prev', 'page', 'next','skip', 'count','limit'],
				  jump: function(obj, first){
				    var tableIns = dataGrid.render({
				    	elem: '#demoGrid3', // 容器
				    	templet: '#demoGridItem3', // 模板
				    	data: res.data,
				    	onItemClick: function(obj) { // item事件
							var index = parent.layer.getFrameIndex(window.name);
							var lfc = top.layerFrameConfig;
							var info = lfc.iframeB.info;
							var ids =  lfc.iframeB.ids;
							var device_ids =  lfc.iframeB.device_ids;
							var data = obj.data;
							data.device_ids = device_ids;
							$.post("{:url('push_temp')}", data, function(res) {
								if (res.code == 0) {
									layer.msg('设置成功', {
										icon: 1,
										time: 300
									}, function() {
										parent.layer.close(index); //再执行关闭
										info.reload()
									});
											
								} else {
									layer.msg(res.message)
									info.reload()
								}
							})
				    	}
				    });
				    //首次不执行
				    if(!first){
				      // 应用
				      $.post("{:url('temp_h_all')}",{limit:obj.limit,offset:obj.curr,type:1}, function(res) {
				      	var tableIns = dataGrid.render({
				      		elem: '#demoGrid3', // 容器
				      		templet: '#demoGridItem3', // 模板
				      		data: res.data,
				      		onItemClick: function(obj) { // item事件
								var index = parent.layer.getFrameIndex(window.name);
								var lfc = top.layerFrameConfig;
								var info = lfc.iframeB.info;
								var ids =  lfc.iframeB.ids;
								var device_ids =  lfc.iframeB.device_ids;
								var data = obj.data;
								data.device_ids = device_ids;
								data.ids = ids;
				      			$.post("{:url('push_temp')}", data, function(res) {
				      				if (res.code == 0) {
				      					layer.msg('设置成功', {
				      						icon: 1,
				      						time: 300
				      					}, function() {
				      						parent.layer.close(index); //再执行关闭
				      						info.reload()
				      					});
				      							
				      				} else {
				      					layer.msg(res.message)
				      					info.reload()
				      				}
				      			})
								
				      		}
				      	});
				      }, 'json');
				    }
				  }
				});
			}, 'json');
			
			

		});
	</script>
</html>
